<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师主页面</title>
    <link rel="stylesheet" href="__LAYUI__/css/layui.css"/>
    <script src="__LAYUI__/layui.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新</button>
    </div>
</script>

<!--列操作框-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table', 'jquery'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        //第一个实例
        table.render({
            elem: '#demo',
            toolbar: '#toolbarDemo',//工具栏
            height: 525,
            url: "{{:url('classcourse')}}", //api数据接口(异步请求）ajax方式
            page: true, //开启  分页
            cols: [[  //设置表头 是一个二维数组
                {type: 'checkbox', title: '序号', width: 80}
                , {type: 'numbers', title: '序号', width: 80}
                , {field: 'classname', title: '班级名称', width: 160}
                , {field: 'coursename', title: '课程名称', width: 160}
                , {field: 'teacherid', title: '老师编号', width: 100}
                , {field: 'yqm', title: '邀请码', width: 120, sort: true}
                , {field: 'datestart', title: '开始时间', width: 160, sort: true}
                , {field: 'dateend', title: '结束时间', width: 160, sort: true}
                , {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //表格外工具条触发事件
        table.on('toolbar(test)', function (obj) {
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    //layer.msg('添加');
                    // document.location.href = "showform"
                    break;
                case 'delete':
                    //检查是否选中了一行
                    // var checkStatus = table.checkStatus('demo'); //demo表中所有选中行的数据
                    // if (checkStatus.data.length < 1) {
                    //     layer.msg('请至少选中一行数据');
                    //     return
                    // }
                    // //获取选中行的id
                    // console.log(checkStatus.data);
                    // var arr = [];
                    // for (var i = 0, len = checkStatus.data.length; i < len; i++) {
                    //     //一行   for循环从所有选中的数据从取出id
                    //     var row = checkStatus.data[i];
                    //     arr.push(row.id) //数组中追加元素   js中访问对象的属性用“.”
                    // }
                    // console.log(arr);
                    //
                    // layer.confirm('是否真的删除选中行?', function (index) {
                    //     //console.log(1111);
                    //     layer.close(stuindex);
                    //     //调用接口 网址接口 id:id （属性：变量名） 回调函数 result为返回的数据
                    //     $.post("delete", {id: arr.join(",")}, function (result) {
                    //         if (result == "success") {
                    //             layer.msg("删除成功");
                    //             //数据重载
                    //             table.reload("demo")
                    //         } else {
                    //             layer.msg("删除取消");
                    //         }
                    //     });
                    // });
                    break;
                //编辑
                case 'update':
                    //检查是否选中了一行
                    // var checkStatus = table.checkStatus('demo'); //demo表中所有选中行的数据
                    // if (checkStatus.data.length != 1) {
                    //     layer.msg('请选中一行数据');
                    //     return
                    // }
                    // //获取id
                    // var id = checkStatus.data[0].id;
                    // console.log(id);
                    // document.location.href = "edit/" + id;
                    break;
                case 'refresh':
                    table.reload('demo'); //重新加载数据
                    break;
            }
        });

        //列（表格内）工具条事件
    //     table.on('tool(test)', function (obj) {
    //         var data = obj.data; //获得当前行数据
    //         var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    //         var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    //
    //         console.log(data);
    //         if (layEvent === 'detail') { //查看
    //             //do somehing
    //         } else if (layEvent === 'del') { //删除
    //             layer.confirm('确实删除本行吗？', function (index) {
    //                 obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
    //                 layer.close(stuindex);
    //                 //向服务端发送删除指令
    //                 $.post("delete", {id: data.id}, function (result) {
    //                     if (result == "success") {
    //                         layer.msg("删除成功");
    //                     } else {
    //                         layer.msg("删除取消");
    //                     }
    //                 })
    //
    //             });
    //         } else if (layEvent === 'edit') { //编辑
    //             //do something
    //             console.log("edit");
    //             document.location.href = "edit/" + data.id;
    //         }
    //
    //     });

    });
</script>

</body>
</html>